<template>
    <div :class="['fileModule', readonly ? ' fileModule_readonly' : '']">
        <div class="label">{{ title }}：</div>

        <van-uploader v-model="fileList_origin" accept="true" :multiple="true" :preview-image="false"
            :after-read="afterRead">
            <van-button icon="plus" type="primary" size="small">上传{{ title }}</van-button>
        </van-uploader>

        <ul v-if="fileList.length > 0">
            <li v-for="(item, index) in fileList" :key="item.id">
                <span>{{ item.fileName }}</span>
                <van-icon v-if="!readonly" name="delete-o" @click.native="delFile(index)" />
            </li>
        </ul>
    </div>
</template>


<script>


import { uploadProcessFiles } from "@/api/public";
export default {
    name: "jUploadFile",
    props: {
        title: {
            type: String,
            default: "上传"
        },

        fieldId: {
            type: String,
            required: true,
            default: ""
        },

        data: {
            type: Array,
        },

        // 请求需要的额外参数
        uploadParam: {
            type: Object,
        },

        readonly: {
            type: Boolean,
            default: false
        }

    },

    data() {
        return {
            fileList_origin: [],
            fileList: [...this.data]
        }
    },
    created() {

    },

    methods: {
        // 读取文件后将文件上传至服务器
        afterRead(file) {
            let files = [];
            if (Array.isArray(file) === true) {
                files = [...file];
            } else {
                files.push(file);
            }

            let formData = new FormData();
            // 额外参数
            for (let i in this.uploadParam) {
                formData.append(i, this.uploadParam[i]);
            }

            for (var i in files) {
                formData.append("file", files[i].file, files[i].file.name);
            }
            uploadProcessFiles(formData, this.uploadParam).then(res => {
                for (var i in res.data.sysFiles) {
                    this.fileList.push(res.data.sysFiles[i]);
                }
                this.$emit("updateData", this.fieldId, this.fileList);
            }).catch(() => {

            });
        },

        // 删除文件
        delFile(index) {
            this.fileList.splice(index, 1);
            this.$emit("updateData", this.fieldId, this.fileList);
        }
    },
    watch: {
        // 'upload.filelist':{
        //     handler:function(newV,oldV){
        //         if(newV){
        //             //console.log("值更新啦！",newV);
        //             this.fileList=newV;
        //         }
        //     },
        //     deep:true,
        //     immediate: true
        // }
    }
}
</script>


<style scoped>
.fileModule {
    position: relative;
    padding: 0 16px 10px;
}

.fileModule .label {
    display: none;
    width: 7em;
    line-height: .2rem;
    padding: 10px 0;
    margin-right: 12px;
}

.fileModule .van-uploader {
    padding: 10px 0;
}

.fileModule ul {
    position: relative;
    background-color: #F2F2F2;
    padding: .15rem;
}

.fileModule::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

.fileModule ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    line-height: .2rem;
    word-break: break-all;
    border-radius: 2px;
    margin-bottom: .15rem;
}

.fileModule ul li .van-icon {
    font-size: 16px;
    color: red;
    margin-bottom: .02rem;
}

.fileModule ul li:last-child {
    margin-bottom: 0;
}

/* 只读 */
.fileModule_readonly .label {
    display: block;
}

.fileModule_readonly .van-uploader {
    display: none;
}
</style>
